<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>水滴告警日报</title>
		<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
		<style type="text/css" media="screen">
			body {
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div id="gaojingqushi" style="width: 100%%;height:400px;"></div>
		<div id="gaojingbili" style="width: 100%%;height:400px;"></div>
		<div id="dangyue" style="width: 100%%;height:400px;"></div>
		<div id="ywph" style="width: 100%%;height:400px;"></div>
		<p class='attribute'>{{ywtongji90|safe}}</p>
		<p>数据来源于水滴（统计告警等级为高危） mainby:opponoc</p>
	</body>
	<script>


		var qs = echarts.init(document.getElementById("gaojingqushi"));
		qs.setOption({
			title: {
				text: '每日高危等级告警数量历史趋势'
			},
			xAxis: {
				type: 'category',
				data: {{lishiriqi | safe}}

			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: {{lishishuzi | safe}},
				type: 'line',
				markLine: {
					symbol: 'none',
					itemStyle: {
						normal: {
							color: '#1e90ff',
							label: {
								show: true
							}
						}
					},
					data: [{
						type: 'average',
						name: '平均值'
					}]
				}
			}],
			dataZoom: [{
				type: 'slider',
				start: 50,
				end: 100
			}]
		}, true);



		var dangyue = echarts.init(document.getElementById('dangyue'));
		dangyue.setOption({
			title: {
				text: '当月所有可统计业务告警数量排行',
				subtext: '当月1日开始统计',
			},
			tooltip: {},
			legend: {
				data: ['数量']
			},
			xAxis: {
				data: {{dangyueywname|safe}}
			},
			yAxis: {},
			series: [{
				name: '数量',
				type: 'bar',
				data: {{dangyueywnmber|safe}}
			}]
		});


		var ywph = echarts.init(document.getElementById('ywph'));
		ywph.setOption({
			title: {
				text: '最近90天所有业务告警数量排行',
				subtext: '于2019/12/31日开始统计',
			},
			tooltip: {},
			legend: {
				data: ['数量']
			},
			xAxis: {
				data: {{ywm|safe}}
			},
			yAxis: {},
			series: [{
				name: '数量',
				type: 'bar',
				data: {{yws|safe}}
			}]
		});


		var bl = echarts.init(document.getElementById("gaojingbili"));
		bl.setOption({
			title: {
				text: '最近60天告警比例',
				subtext: '于2019/12/31日开始统计',
				left: 'center'
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			series: [{
				name: '比例',
				type: 'pie',
				radius: '50%%',
				center: ['50%%', '50%%'],
				data: {{bili60|safe}},
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		}, true);
	</script>
</html>
